<template>
    <div >
<div v-for="(item,index) in complete" :key="index" class="conts">
    <div class="commodity">
        <span>{{item.cusName}}</span>
        <a href="#">&gt;</a>
    </div>
          <van-card
               :desc="`下单时间：`+item.orderTime"
               :title="item.cusName"
               thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
                  <template #tags class="commoditys">
                    <van-tag plain type="danger">下单人：</van-tag>
                    <van-tag plain type="danger">{{item.orderUserName}}</van-tag>
                  </template>
                </van-card>
                 <div class="bottom">
              <span class="span2" @click="showPopup">收货</span>
            </div>
            <van-popup v-model="show" round:style="{ height: '18%', width: '100%',display:'none' }">
              <div class="yes">是否确定收货</div>
              <div class="cancel">
                <span @click="cancelClick">取消</span>
                <span @click="confirmClick(item.serialNo)">确定收货</span>
              </div>
            </van-popup>
   </div>
        
    <van-empty description="描述文字" v-show="!complete.length" />


    </div>
</template>

<script>
import {GetGoodsTwo,GetConfirmShou} from '@/raxios/api'
export default {
    data () {
        return {
            value:'',
            complete:[],
            show:false,
            showMore:true,
           
            
 
        }
    },
    
    created(){
    GetGoodsTwo({current:'1',size:'10',keyword:''}).then(res=>{
        this.complete=res.data.records
        // console.log(complete);
        console.log(res);
    })
 },
 methods:{
     showPopup(){
         this.show=true
     },
      cancelClick() {
      this.show = false;
    },
   confirmClick(serialNo) {
      GetConfirmShou(serialNo).then((res) => {
   
          this.$router.go(0)
      });
      this.show = false;
    },
    
 }
}
</script>
 
<style lang = "less" scoped>
   .commodity{
        height: 0.3rem;
        border-bottom: 1px solid #ccc;
        line-height: 0.3rem;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: .2rem;
        font-size: 0.14rem;}
.conts{
    margin-bottom: 0.1rem;
}
    .van-card__header{
        border-bottom: 1px solid #ccc;
    }
    /deep/.van-tag--plain::before{
        border: none;
    }
    .van-tag{
    color: #646566;
    }
    /deep/.van-button{
        padding: 0.15rem;
        margin-top: 0.1rem;
        background-color:none;
        border-radius: 0.2rem;
        color: #003399;
        border: 1px solid #003399;
        width: 0.72rem;
    }
    .van-card:not(:first-child) {
        margin: 0;
    }
    .van-card{
        background-color: #fff;
    }
     .bottom {
      height: 0.5rem;
      background-color: #fff;
      span {
        float: right;
        width: 0.7rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background-color: #ffcc33;
        border-radius: 0.3rem;
        color: #fff;
        margin: 0.1rem 0.1rem;
      }
    
      .span2 {
        float: right;
        width: 0.7rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background-color: #fff;
        border: 1px solid #003399;
        border-radius: 0.3rem;
        color: #003399;
        margin: 0.1rem 0.1rem;
      }
      }
      .yes {
  height: 1rem;
  width: 2.5rem;
  line-height: 0.7rem;
  text-align: center;
  border-bottom: 1px solid #efefef;
}
.cancel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  span {
    width: 50%;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    &:nth-child(1) {
      border-right: 1px solid #efefef;
    }
  }
}
/deep/.van-overlay {
  background-color: rgba(0, 0, 0, 0.1);
}
.bottoms {
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  color: #4872c7;
  background-color: #fff;
  margin-top: 0.1rem;
  .van-icon {
    margin-left: 0.05rem;
  }
}
</style>